<template>
    <div id="deepmap_container" ref="deepmap_container" :style="{ height: height + 'px' }"></div>
</template>

<script>
    import commonService from '../../common/commonService';
    import filter from '../../util/filter';
    import {LANG, LOCAL} from '../../util/lang';

    export default{
        data(){
            return {
                Price: '',
                buyColor: '#17a21d',
                sellColor: '#ff4622',
                precision:this.$$coinPrecision,
                intervalId:null
            }
        },
        props: {
            wsSymbol:{
                default:'BTC_ETH'
            },
            height:{
                default:400
            }
        },
        components: {},
        created() {

        },
        beforeDestroy(){
            clearInterval(this.intervalId);
        },
        mounted() {
            let text = {
                price: this.$t('common.comp.price')+'('+this.wsSymbol.split('_')[0]+')',
                volume: this.$t('common.comp.volume')+'('+(this.wsSymbol.split('_')[1] === 'TIC' ? 'TV' : this.wsSymbol.split('_')[1]) +')',
                comPrice: this.$t('common.comp.price'),
                comVolume: this.$t('common.comp.volume'),
                sumBuy: this.$t('common.comp.depth.ask'),
                sumSell: this.$t('common.comp.depth.ask'),
            };

            let that = this;


            $('#deepmap_container').highcharts({
                chart: {
                    type: 'area',
                    backgroundColor:'#212121',
                    borderColor:'red',
                    spacing: [80, 16, 8, 16],
                    events: {
                        load: function () {
                            let series0 = this.series[0];
                            let series1 = this.series[1];

                            commonService.loopDepthMap({
                                symbol:that.wsSymbol
                            }).done(data=>{
                                formateData(data);
                            });

                            that.intervalId = setInterval(()=>{
                                commonService.loopDepthMap({
                                    symbol:that.wsSymbol
                                }).done(data=>{
                                    formateData(data)
                                });
                            },5000);


                            function formateData(data) {
                                let range = localStorage.getItem('cur');
                                console.log(range)
                                let filterBuyPrices = [];
                                let filterSellPrices = [];

                                if (data && Array.isArray(data)) {
                                    var  buyPrices = data[0],
                                        sellPrices = data[1];
                                    if (buyPrices && Array.isArray(buyPrices) && Array.isArray(buyPrices[0])) {
                                       var min = parseFloat(range) - parseFloat(range)*0.5;
                                       console.log(min)
                                        for (var i = 0; i < buyPrices.length; i++) {
                                            var curPrice = buyPrices[i];
                                           if (curPrice && curPrice[0] && curPrice[0] <= range && curPrice[0] >= min) {
                                                filterBuyPrices.push(curPrice)
                                           }
                                        }
                                    }
                                    if (sellPrices && Array.isArray(sellPrices) && Array.isArray(sellPrices[0])) {
                                       var max = parseFloat(range) + parseFloat(range)*0.5;
                                        console.log(max)
                                        for (i = 0; i < sellPrices.length; i++) {
                                            var curPrice = sellPrices[i];
                                           if (curPrice && curPrice[0] && curPrice[0] >= range && curPrice[0] <= max) {
                                                filterSellPrices.push(curPrice)
                                           }
                                        }
                                    }
                                }
                                filterBuyPrices = filterBuyPrices.sort(function (a, b) {
                                    return a[0] > b[0] ? 1 : -1;
                                });
                                filterSellPrices = filterSellPrices.sort(function (a, b) {
                                    return a[0] > b[0] ? 1 : -1;
                                });
                                series0.setData(filterBuyPrices);
                                series1.setData(filterSellPrices);
                                console.log(filterBuyPrices)
                                console.log(filterSellPrices)
                            }

                        }
                    }
                },
                loading: {
                    style: {
                        position: 'absolute',
                        opacity: 0.2,
                        textAlign: 'center',
                        backgroundColor: 'none',
//                        background: 'url("./img/loading-2.gif") center center no-repeat',
                        backgroundSize: '32px 32px',
                        fontSize:0
                    }
                },
                credits: {
                    text: '',
                    href: ''
                },
                title: {
                    text: ""//smart深度图
                },
                subtitle: {},
                xAxis: {
                    title: {
                        text: text.price,
                        style: {color: '#8c8c8c'}
                    },
                    allowDecimals: true,
                    labels: {
                        style: {color: '#8c8c8c'},
                        formatter: function () {
//                            console.log('The price is :' + filter.floorFixPrice(this.value, that.precision));
                            return filter.floorFixPrice(this.value, that.precision);
                        }
                    },
                    lineColor:'#343535',
                    tickColor:'#343535'
                },
                yAxis: {
                    title: {
                        text: text.volume,
                        style: {color: '#8c8c8c'}
                    },
                    gridLineColor:'#343535',
                    labels: {style: {color: '#8c8c8c'}},
                    gridLineDashStyle:'ShortDash'
                },
                tooltip: {
                    useHTML: true,
                    borderWidth: 1,
                    headerFormat: '',
                    enabled: true,
                    formatter() {
                        return text.comPrice + ': ' + filter.floorFixPrice(this.x,that.precision) + '</br>' + this.series.name + ': ' +  filter.floorFixPrice(this.y,that.$$amountPrecision);
                    }
                },
                exporting: {enabled: false, buttons: {exportButton: {enabled: false}, printButton: {enabled: true}}},
                plotOptions: {
                    area: {
                        pointStart: 0,
                        marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 4,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                legend:{
                    itemStyle:{ "color": "#8c8c8c"}
                },
                series: [{
                    name: text.sumBuy,
                    color: this.buyColor,
                    data: []
                }, {
                    name: text.sumSell,
                    color: this.sellColor,
                    data: []
                }]
            });
        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">

</style>
